<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .img {
        position: relative;
        width: 100px;
        height: 100px;
      }
      .overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        color: black;
        /* 字体居中 */
        transform: translate(-50%, -50%);
        font-size: large;
        /* 悬停前完全透明 */
        /* opacity: 0; */
        transition: 0.3s ease-in-out;
      }

      .img:hover .overlay {
        transition: 0.3s ease-in-out;
        /* 悬停时完全不透明 */
        opacity: 1;
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="images"></div>
  </body>
  <script>
    fetch("images.json", {
      headers: {
        "content-type": "application/json",
      },
      method: "GET",
      credentials: "include",
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data); // 在这里可以处理读取到的 JSON 数据
        const imageBox = document.getElementById("images");
        console.log("images", imageBox);
        for (let src of data) {
          let img = document.createElement("img");
          img.src = src;
          img.className = "img";
          imageBox.appendChild(img);
          let imgNote = document.createElement("div");
          imgNote.textContent = src;
          imgNote.className = "overlay";
          imageBox.appendChild(imgNote);
        }
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  </script>
</html>
